<!DOCTYPE html>
<html>
<head runat="server">
    <title>Index</title>
    <script type="text/javascript" src="Scripts/jquery-1.4.4.js"></script>
    <script type="text/javascript" src="Scripts/jQXB.1.1.js"></script>
    <script type="text/javascript" src="Scripts/jQXBmsgtopic.js"></script>
</head>
<body>
    <div>
        <h2>Dynamic Widget , Composite Pattern and Messaging</h2>
        <h3>"Select" link sends a "msg_cust_selected". Try the link now and after loading "Cust Details" and/or "Cust Extended Detail"</h3>
    </div>
    <div>
        <div id="listPanel" style="float: left;">
			<div>
				Updated: <span jqxb-datasource="objectDataSource" jqxb-datamember="Name" jqxb-bindedattribute="html">[No Update]</span>
			</div>
			<div id="CustomerList"></div>
            <input type="button" value="Load Cust Details" onclick="MainPage.loadCustDetailPanel(false);" />
            <input type="button" value="Load Cust Extended Details" onclick="MainPage.loadCustDetailPanel(true);" />
        </div>
        <div id="custDetailsPanelExt" style="float: left;">
        </div>
    </div>
</body>
<script type="text/javascript">
    var MainPage = {}
    MainPage.loadCustDetailPanel = function (bextended) {
		jQXBM.fireMessage(jQXBtopics.MSG_PREPARELOADING);
		if(!bextended)
			jQuery('#custDetailsPanelExt').load('Index_CustomerDetails.html');
		else
			jQuery('#custDetailsPanelExt').load('Index_CustomerDetailsExt.html');
		
    }
	MainPage.displayUpdatedData = function(Customer){
		jQXB.setDataSource("objectDataSource",Customer).doBind("objectDataSource");
	}
	
	jQuery(document).ready(function(){
		jQXB.initialize();
		jQuery('#CustomerList').load('Index_Customerlist.html');
		jQXBM.subscribeMessage(jQXBtopics.MSG_CUSTOMER_UPDATED, MainPage.displayUpdatedData);
		//alert(jQXB.diags.dumpobj(jQXBM.messageSubscribers,"MessageSubscriber","->"));

	});



</script>
</html>